{% extends 'base.html' %}

{% block title %}报修{% endblock %}
{% block stylesheet %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/garden.css') }}">
{% endblock %}
{% block content %}
	<header class='demos-header'>
    <h1 class="demos-title">提交报修问题</h1>
  </header>


<form id="repairForm" name="repairForm" action="/pubRepair" method="POST">
  <div class="weui-cells__title">标题</div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input name="title" class="weui-input" type="text" placeholder="请输入标题 格式：[楼栋][楼层][问题]" id="repair_title">
        </div>
      </div>
    </div>

  <div class="weui-cells__title">紧急程度</div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <select class="weui-select" name="urgency">
            <option value="0">低</option>
            <option selected="true"  value="1">中</option>
            <option value="2">高</option>
          </select>
        </div>
      </div>
  </div>

  <div class="weui-cells__title">问题描述</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="article-content" id="content"> </div>
          <input name="content" type="hidden" id="repair_content">
        </div>
      </div>
    </div>

</form>
  <div class="footer-btn g-image-upload-box">
	<div class="upload-button">
		<span class="upload"><i class="upload-img"></i>插入图片</span>
		<input class="input-file" id="imageUpload" type="file" name="fileInput" accept="image/*" style="position:absolute;left:0;opacity:0;width:100%;">
	</div>
	</div>


    <div class="weui-btn-area">
      <a class="weui-btn weui-btn_primary" href="javascript:postTopic()" id="showTooltips">确定</a>
    </div>
{% endblock %}

{% block jsblock %}
$('#content').artEditor({
  imgTar: '#imageUpload',
  limitSize: 5,   // 兆
  compressSize: 2,
  showServer: true,
  uploadUrl: '/upload',
  data: {},
  uploadField: 'image',
  placeholader: '<p>请输入内容</p>',
  validHtml: ["br"],
  formInputId:'repair_content',
  beforeUpload: function(imgBase64) {
    // 处理完之后，必须return图片数据   
    return imgBase64
  },
  uploadSuccess: function(res) {
            // 这里是处理返回数据业务逻辑的地方
            // `res`为服务器返回`status==200`的`response`
            // 如果这里`return <path>`将会以`<img src='path'>`的形式插入到页面
            // 如果发现`res`不符合业务逻辑
            // 比如后台告诉你这张图片不对劲
            // 麻烦返回 `false`
            // 当然如果`showServer==false`
            // 无所谓咯
            //alert(res.path)
    return res.path;
  },
  uploadError: function(res) {
    alert('uploadError')
    //这里做上传失败的操作
        //也就是http返回码非200的时候
    console.log(res);
  }
});

function postTopic() {
  if( !$('#repair_title').val()) {
    $.toptip('请输入标题');
    return;
  }

  content = $('#content').getValue()
  if(content == '<p>请输入内容</p>') {
    $.toptip('请输入内容');
    return;
  }

  //$('#topic_content').val(content);

  $('#repairForm').submit();
  
}
{% endblock %}